<template>
    <div class="announcement-container">
      <el-card class="box-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>系统公告</span>
          </div>
        </template>
        
        <div v-for="item in announcementList" :key="item.id" class="announcement-item">
          <div class="announcement-header">
            <h3>{{ item.title }}</h3>
            <span class="announcement-time">{{ formatTime(item.createTime) }}</span>
          </div>
          <div class="announcement-content" v-html="item.content"></div>
        </div>
        
        <el-pagination
          v-model:current-page="queryParams.page"
          v-model:page-size="queryParams.size"
          :total="total"
          layout="prev, pager, next"
          @current-change="handlePageChange"
        />
      </el-card>
    </div>
  </template>
  
  <script>
  import announcementApi from '@/api/announcement'
  import { ElMessage } from 'element-plus'
  
  export default {
    name: 'Announcement',
    data() {
      return {
        announcementList: [],
        total: 0,
        queryParams: {
          page: 1,
          size: 10,
          title: '',
          status: 1 // 只查询已发布的公告
        }
      }
    },
    created() {
      this.fetchAnnouncements()
    },
    methods: {
      fetchAnnouncements() {
        announcementApi.list(
          this.queryParams.page,
          this.queryParams.size,
          this.queryParams.title,
          this.queryParams.status
        ).then(response => {
          this.announcementList = response.data.records
          this.total = response.data.total
        }).catch(error => {
          ElMessage.error('获取公告列表失败')
          console.error(error)
        })
      },
      formatTime(time) {
        return new Date(time).toLocaleString()
      },
      handlePageChange(page) {
        this.queryParams.page = page
        this.fetchAnnouncements()
      }
    }
  }
  </script>
  
  <style scoped>
  .announcement-container {
    padding: 20px;
  }
  
  .announcement-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
  }
  
  .announcement-item:last-child {
    border-bottom: none;
  }
  
  .announcement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .announcement-header h3 {
    margin: 0;
    color: #333;
  }
  
  .announcement-time {
    color: #999;
    font-size: 14px;
  }
  
  .announcement-content {
    color: #666;
    line-height: 1.6;
  }
  
  .el-pagination {
    margin-top: 20px;
    justify-content: center;
  }
  </style>